// 结束订单租借
import { OrderItem } from '@/pages/OrderCabinet';
import { DatePicker, Descriptions, message, Radio, Spin } from 'antd';
import Modal, { ModalFuncProps } from 'antd/lib/modal/Modal';
import { Moment } from 'moment';
import React, { useState } from 'react';
import { endLeaseOrder, EndLeaseOrderParamsType } from '@/services/order';
import { connect, CurrentUser } from 'umi';
import { ConnectState } from '@/models/connect';
import { LinearOrderItem } from '@/pages/OrderPowerline';

interface EndOrderModalProps {
  visible: boolean;
  onCancel: Function;
  onSuccess: Function;
  order?: OrderItem | LinearOrderItem;
  userState?: CurrentUser;
  order_type: number;
}

let config: ModalFuncProps = {
  title: '提示',
  content: <>确定要结束订单吗?</>,
  cancelText: '取消',
  okText: '确定',
};

// Modal
const EndOrderModal: React.FC<EndOrderModalProps> = (props) => {
  const { visible, onCancel, onSuccess, order, userState, order_type } = props;
  const [endType, setEndType] = useState(2); // 设置扣费状态
  const [endTime, setEndTime] = useState<Moment | null>(); // 结束时间
  const [loading, setLoading] = useState(false); // 是否刷新
  const [modal, contextHolder] = Modal.useModal();

  const onChange = (value: Moment | null) => {
    setEndTime(value);
  };

  const toConfirm = () => {
    if (!endTime) {
      message.error('请选择结束时间!');
      return;
    }
    config.onOk = (close) => {
      close();
      const data: EndLeaseOrderParamsType = {
        uId: userState?.id!,
        userType: userState?.user_type!,
        token: userState?.token!,
        order_no: order?.order_no!,
        order_type: order_type,
        end_time: endTime?.format('YYYY-MM-DD HH:mm:ss'),
        end_type: endType,
      };
      setLoading(true);
      endLeaseOrder(data)
        .then((res) => {
          setLoading(false);
          if (res.code == 0) {
            message.success('结束成功!');
            onCancel();
            setEndTime(null);
            onSuccess();
          }
        })
        .catch((err) => {
          setLoading(false);
          console.log(err);
          message.error('结束失败，请重试!');
        });
    };
    modal.confirm(config);
  };
  return (
    <>
      <Modal
        cancelText="取消"
        okText="结束"
        key="1"
        title="结束订单"
        visible={visible}
        onOk={() => toConfirm()}
        onCancel={() => {
          onCancel();
          setEndTime(null);
        }}
      >
        <Spin spinning={loading}>
          <Descriptions bordered={true} column={1}>
            <Descriptions.Item label="开始时间">
              {order ? order.start_time : '--'}
            </Descriptions.Item>
            <Descriptions.Item label="结束时间">
              <DatePicker showTime onChange={onChange} value={endTime} />
            </Descriptions.Item>
            <Descriptions.Item label="是否扣费">
              <Radio.Group value={endType} onChange={(e) => setEndType(e.target.value)}>
                <Radio value={1}>不扣费</Radio>
                <Radio value={2}>扣费</Radio>
              </Radio.Group>
            </Descriptions.Item>
          </Descriptions>
        </Spin>
      </Modal>

      {contextHolder}
    </>
  );
};

export default connect(({ user }: ConnectState) => ({ userState: user.currentUser }))(
  EndOrderModal,
);
